<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
    <script src="../org/jquery.min.js"></script>
    <script src="../org/angular-ui-router.min.js"></script>
</head>

<body>

<div ng-app="hd">
    <!--在href中指定锚点，应该与路由规则中的url对应，以#开头-->
    <!--<a href="#/home">首页</a>-->
    <!--在ui-sref中指定锚点，应该与路由规则中的state的第一个参数对应，推荐使用-->
    <a href="" ui-sref="home">首页</a>

    <a href="#/lists" >列表页</a>
    <!--<a href="" ui-sref="lists">列表页</a>-->

    <!--使用ui-view属性，表示显示路由模板内容-->
    <div ui-view>你访问的页面不存在</div>
</div>

    <script>
        var m = angular.module('hd', ['ui.router']);

        m.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            //默认路由（没有匹配的情况下显示这个锚点）
            $urlRouterProvider.otherwise('');
            //定义路由规则
            $stateProvider
                .state('default', {
                    url: '',
                    template: '<h2>后盾人</h2>'
                })
                .state('home', {
                    url: '/home',
                    templateUrl: 'view/home.html'
                })
                .state('lists', {
                    url: '/lists',
                    template: '<h2>列表页</h2>'
                })
        }])


    </script>

</body>

</html>